<template>
  <div class="history">
    <div
      @click="goToDetail(item.id)"
      v-for="item in list"
      :key="item"
      class="history-item"
    >
      <img :src="item.coverimage" />
      <div class="history-item-left">
        <div class="title">{{ item.title }}</div>
        <div class="subtitle">地点：{{ item.city }}</div>
        <div class="subtitle">专业：{{ item.subtitle }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const list = JSON.parse(decodeURIComponent(route.query.list));
console.log(list);
const router = useRouter();
const goToDetail = (index) => {
  router.push({ path: '/connect' });
};
</script>

<style lang="less" scoped>
.history {
  padding: 0 8px;
  .history-item {
    height: 94px;
    background-image: url('../../assets/images/list-bg.png');
    margin-top: 12px;
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 0 23px;
    display: flex;
    align-items: center;
    img {
      width: 65px;
      height: 65px;
      margin-right: 20px;
    }
    .history-item-left {
      .title {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 25px;
        margin-bottom: 3px;
      }
      .subtitle {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #868686;
        line-height: 17px;
        margin-bottom: 3px;
      }
    }
  }
}
</style>
